<template>
  <!--面包屑-->
<div style="margin-bottom: 30px">
<el-breadcrumb separator="/">
 <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
 <el-breadcrumb-item>
  <router-link to="/Expense">费用管理</router-link>
 </el-breadcrumb-item>
 <el-breadcrumb-item>费用修改</el-breadcrumb-item>
</el-breadcrumb>
</div>
     <div >
 <h2>修改费用记录</h2><br>
 <el-form
 ref="ruleFormRef"
 style="max-width: 600px"
 :model="form"
 :rules="rules"
 label-width="auto"
 class="demo-ruleForm"
 :size="formSize"
 status-icon
>
 <table>
 <tr>
     <td>
 <el-form-item label="费用标题：" style="font-size: 20px;float: right;" prop="expenseTitle">
         <el-input v-model="form.expenseTitle" style="width: 300px;height: 40px;"
         placeholder="请输入费用标题" clearable />
       </el-form-item>
    </td>
      </tr>
 
   <tr>
     <td>
       <el-form-item label="费用类型" style="font-size: 20px;float: right;" prop="expenseType">
         <el-input v-model="form.expenseType" style="width: 300px;height: 40px;"
         placeholder="请输入费用类型" clearable />
       </el-form-item>
     </td>
</tr>
   <tr>
     <td>
       <el-form-item label="车牌号：" style="font-size: 20px;float: right;">
        <el-select v-model="form.licensePlateNumber" placeholder="车牌号" style="width: 300px;">
      <el-option v-for="item in line" :label="item" :value="item" />
   </el-select>
       </el-form-item>
     </td>
     </tr>
   <tr>
     <td>
       <el-form-item label="金额" style="font-size: 20px;float: right;" prop="expensePrice">
         <el-input v-model="form.expensePrice" style="width: 300px;height: 40px;"
         placeholder="请输入金额" clearable />
       </el-form-item>
     </td>
   </tr>
   <tr>
     <td>
       <el-form-item label="负责人" style="font-size: 20px;float: right;" prop="expenseHead">
         <el-input v-model="form.expenseHead" style="width: 300px;height: 40px;"
         placeholder="请输入负责人" clearable />
       </el-form-item>
     </td>
   </tr>
   <tr>
     <td>
       <el-form-item label="描述"   style="font-size: 20px;float: right;" prop="expenseDesc">
          <el-input v-model="form.expenseDesc" type="textarea" style="font-size: 20px;width: 300px;height: 80px;"></el-input>
       </el-form-item>
     </td>
   </tr>
   <tr>
     <td>
       <el-form-item label="使用日期"   style="font-size: 20px;float: right;" prop="expenseDate">
         <el-date-picker v-model="form.expenseDate" type="date"  value-format="YYYY-MM-DD"
         placeholder="请选择使用日期" clearable  style="width: 300px;height: 40px;"/>
       </el-form-item>
     </td>
   </tr>

 
   <tr>
     <td>
       <el-form-item label="备注"   style="font-size: 20px;float: right;" prop="expenseRemark">
          <el-input v-model="form.expenseRemark" type="textarea" style="font-size: 20px;width: 300px;height: 80px;"></el-input>
       </el-form-item>
     </td>
   </tr>

</table>
 </el-form><br><br>
   <tr align="center">
     <el-button type="primary" @click="Approval" 
       style="width: 150px;height: 50px;">修改</el-button>
     <el-button  @click="Cancel" style="width: 150px;height: 50px;"
      >取消</el-button>
</tr>
 </div>
</template>
 
<script setup lang='ts'>
  import axios  from 'axios';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import type { UploadProps, UploadUserFile } from 'element-plus'
 import { ref, reactive, onMounted,watch } from 'vue'; 
 import { useRouter, useRoute } from 'vue-router';
 const route = useRoute();
 const router = useRouter();
 const form=reactive({
  expenseId:route.query.expenseId,
  expenseTitle:'',
  expenseType:'',
  licensePlateNumber:'',
  expensePrice:'',
  expenseHead:'',
  expenseDesc:'',
  expenseDate:'',
  updatedBy:'admin',//更新人
    updatedDate:new Date(),//更新时间
    createdBy:'admin',//创建人
    createdDate:new Date(),//创建时间
    deletedBy:'admin',//删除人
    deletedDate:new Date(),//删除时间
  expenseRemark:''
 })
onMounted(()=>{
 getLine()
 backfill()
})

//绑定车牌号
const line=ref([])
const getLine=()=>{
axios.get('/carread/api/Main/GetCar').then(res=>{
    console.log(res.data.data)
    line.value=res.data.data.map(o=>o.plateNumber)
    console.log(line.value)
 })
}
//反填
const backfill=()=>{
    axios.get('/carread/api/Expense/ExpenRecord', {
        params: {
          ExpenseId: route.query.expenseId
        }
      }).then(res => {
      form.expenseTitle=res.data.data.expenseTitle
      form.expenseType=res.data.data.expenseType
      form.licensePlateNumber=res.data.data.licensePlateNumber
      form.expensePrice=res.data.data.expensePrice
      form.expenseHead=res.data.data.expenseHead
      form.expenseDesc=res.data.data.expenseDesc
      form.expenseDate=res.data.data.expenseDate
      form.expenseRemark=res.data.data.expenseRemark
      form.createdBy=res.data.data.createdBy
        form.createdDate=res.data.data.createdDate
        form.deletedBy=res.data.data.deletedBy
        form.deletedDate=res.data.data.deletedDate
        form.updatedBy=res.data.data.updatedBy
        form.updatedDate=res.data.data.updatedDate
    
        
      })
}
//取消
const Cancel=()=>{
router.push('/Expense')
}
//提交
const Approval=()=>{
console.log(form)
axios.post('/carwrite/api/Expense/UpdateExpenenanceRecord',form).then(res=>{
  console.log(res.data.data)
    if(res.data.data>0){
     ElMessage({
       message: '修改成功',
       type: 'success',
     })
     router.push('/Expense')
    }else{
     ElMessage.error('修改失败')
    }
  })
  }

const rules = reactive<FormRules>({
expenseTitle: [
 { required: true, message: '费用标题不能为空', trigger: 'blur' },

],
expenseType: [
 { required: true, message: '费用类型不能为空', trigger: 'blur' },

],
expensePrice: [
 { required: true, message: '金额不能为空', trigger: 'blur' },

],
expenseHead: [
 { required: true, message: '负责人不能为空', trigger: 'blur' },

],

expenseDesc: [
 { required: true, message: '描述不能为空', trigger: 'blur' },

],
expenseDate: [
  {
    required: true,
    message: '请选择使用日期',
    trigger: 'change',
  },
],
expenseRemark: [
 { required: true, message: '备注不能为空', trigger: 'blur' },

],
})

</script>